<template>
	<uni-popup class="pop" ref="popupRef" type="bottom" :animation="true">
		<view class="pop-content" :style="{ marginBottom: '-' + safeBottom + 'px'}">
			<view class="header">
				<view>
				</view>
				<text>选择房间出行人</text>
				<image @click="closePop"
					src="https://img.js.design/assets/img/6182473b46044cfbbf3e9dfc.png#9df8c2e09d3f6e5fe6a902838e7a3573"
					mode=""></image>
			</view>
			<view class="container-content">
				<view class="input">
					<view class="Travelers" @click="gotoAddPage">
						<image src="../../../static/product-cwr/jiahao.png" mode=""></image>
						新增出行人
					</view>
				</view>
				<scroll-view v-if="idInfo.length > 0" scroll-y="true" class="scroll">
					<checkbox-group name="" @change="checkboxChange">
						<block v-for="(item,index) in  idInfo" :key="index">
							<view class="people-card">
								<view class="lt">
									<image @click="toDetailTraveler(item.travelers_id)"
										src="../../../static/eIcones/bianji.png" mode=""></image>
									<view class="info-card">
										<view class="name">
											{{item.travelers_name}}
										</view>
										<view class="Idnumber">
											身份证 {{item.travelers_card_number}}
										</view>
									</view>
								</view>
								<label>
									<view class="rt">
										<checkbox color="#000000"
											:checked="idCards.includes(item.travelers_card_number)"
											:value="item.travelers_card_number"
											:disabled="idCards.length >= props.orderinfo.peoples && !idCards.includes(item.travelers_card_number)">
										</checkbox>
									</view>
								</label>
							</view>
						</block>

					</checkbox-group>
				</scroll-view>
				<view v-else class="people-card">
					暂无出行人 请添加
				</view>

				<view class="" style="height: 2.5vh;">

				</view>
				<view class="footer" @click="result">
					完成
				</view>
			</view>

		</view>
	</uni-popup>
</template>
<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		safeBottom
	} from '@/config/systemInfo.js'
	const props = defineProps({
		idInfo: {
			type: Array,
			default: []
		},
		roomIndex: {
			type: Number,
		},
		roomsValue: {
			type: Array,
			default: []
		},
		orderinfo: {
			type: Object,
			default: () => {}
		}
	})
	// const roomIndex = ref()
	const localRoomIndex = ref(props.roomIndex); // 使用 ref 存储 roomIndex
	const selectedItem = ref()
	const popupRef = ref(null);
	const idCards = ref([]); // 存储已选中的 idCard
	// 子组件方法
	const emits = defineEmits(['result'])
	const closePop = () => {
		popupRef.value.close();
	}
	//去添加新的出行人 传 1 为添加 传 2 为编辑
	const gotoAddPage = () => {
		uni.navigateTo({
			url: '/homeSubpages/addIdinfo/addIdinfo?operate=1'
		})
	}
	watch(() => props.roomsValue, (newVal) => {
		console.log('idInfo', props.idInfo);
		if (newVal) {

			idCards.value = newVal.flatMap(room => room.selectedItems.map(item => item.travelers_card_number))

		}
	}, {
		deep: true
	})
	// 暴露方法给父组件
	const exposeMethods = {
		showPopup: (roomIndex) => {
			popupRef.value.open();
			localRoomIndex.value = roomIndex; // 使用 localRoomIndex 来存储 roomIndex

		},
		closePopup: () => {
			popupRef.value.close();
		}
	};
	const checkboxChange = (e) => {
		const selectedItems = e.detail.value;
		// 检查是否超出限制
		if (selectedItems.length > props.orderinfo.peoples) {
			uni.showToast({
				title: `最多只能选择 ${props.orderinfo.peoples} 位出行人`,
				icon: 'none',
			});

			// 恢复到之前的选中状态
			const selectedIds = selectedItem.value.map(item => item.travelers_card_number);
			const res = props.idInfo.filter(item =>
				selectedIds.includes(item.travelers_card_number)
			);

			// 更新 checkbox-group 数据
			selectedItem.value = res;
			return;
		}
		const res = props.idInfo.filter(item => selectedItems.includes(item.travelers_card_number));
		selectedItem.value = res
		  // 更新已选中的 idCards 列表
		    idCards.value = selectedItems;
	};
	const result = () => {
		emits('result', selectedItem.value, localRoomIndex.value); // Emit with roomIndex
	};
	//编辑对应出行人的信息  传 1 为添加 传 2 为编辑
	const toDetailTraveler = (travelers_id) => {
		console.log('travelers_id', travelers_id);
		uni.navigateTo({
			url: `/homeSubpages/addIdinfo/addIdinfo?operate=2&travelerid=${travelers_id}`
		})
	}

	defineExpose({
		...exposeMethods
	});
</script>
<style scoped>
	.pop-content {
		font-family: "仓耳渔阳体 W05";
		/* 添加样式 */
		background: #fff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		/* padding: 86rpx 296rpx 80rpx 296rpx; */
	}

	.header {
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		height: 43rpx;
		background: rgba(255, 255, 255, 1);
		padding: 24rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 33rpx;
	}

	.header image {
		width: 44rpx;
		height: 44rpx;
	}

	.container-content {
		width: 100%;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		background: rgba(246, 246, 246, 1.0);
	}

	.input {
		display: flex;
		gap: 40rpx;
		align-items: center;
		color: rgba(56, 56, 56, 1);
		font-size: 30rpx;
		font-weight: 400;
		margin-bottom: 30rpx;
	}

	.Travelers {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #000000;
		padding: 20rpx;
		box-sizing: border-box;
		gap: 24rpx;
		border-radius: 10rpx;
	}

	.Travelers image {
		width: 32rpx;
		height: 32rpx;
	}

	.Travelers text {
		font-size: 28rpx;
		font-weight: 400;
	}

	.people-card {
		margin-top: 30rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 28rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.people-card image {
		width: 48rpx;
		height: 48rpx;
	}

	.people-card .lt {
		display: flex;
		gap: 20rpx;
		align-items: center;
	}

	.info-card .name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.info-card .Idnumber {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-weight: normal;
		color: rgba(125, 125, 125, 1);
	}

	.scroll {
		height: 600rpx;
	}

	.footer {
		width: 100%;
		background-color: #000;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		padding: 18rpx;
		box-sizing: border-box;
		text-align: center;
	}
</style>